<template>
	<div class="songlitB">
		<div class="text1">
			<div class="son">
				<li class="fl arrow">
					<router-link to="indexOne/sonOne">
						<img src="../images/imagesto.png" />
					</router-link>
				</li>
				<h4>{{this.$store.state.curTitle}}</h4>
				<ul>
					<li class="ul-pic fl">
						<img :src="imgb" />
					</li>
					<div class="ul-text fr">
						<h4>{{this.$store.state.curInfo}}</h4>
						<li class="li-pic">
							<img src="../images/00.png" />
						</li>
						<p>喜欢</p>
					</div>
				</ul>
			</div>
		</div>
		<div class="text2">
			<li>
				<i class="pic">
					<img @click="pic" :src="ssrc"/>
				</i>
				<p>随便播放<span>({{shou}}首)</span></p>
			</li>
			<li class="choice fr">
				<i class="pic">
					<img src="../images/dx.png"/>
				</i>
				<p>多选</p>
			</li>
			<li class="fr">
				<i class="pic">
					<img src="../images/xz.png"/>
				</i>
				<p>下载</p>
			</li>
		</div>
		<div class="text3">
			<li class="song" v-for="(item,index) in type" @click="xinG(index)">
				<h3>{{item.title}}</h3>
				<p>{{item.artist_name}}</p>
			</li>
		</div>
		<MusicFooter></MusicFooter>
	</div>
</template>

<script>
	import MusicFooter from "./MusicFooter";
	import jsonp from "jsonp";
	export default {
		name: 'songlitB',
		data() {
			return {
				ssrc: "../images/bf.png",
				type: [],
				shou: "",
			}
		},
		computed: {
			imgb() {
				return this.$store.state.songID;
			},
		},
		components: {
			MusicFooter,
		},
		props: ["src"],
		methods: {
			pic(e) {
				this.ssrc = this.ssrc == "../images/bf.png" ? "../images/zt.png" : "../images/bf.png"
			},
			xinG(index) {
				//          	console.log(index)
				console.log(this.type[index].song_id)
				this.$store.commit("musicIndex",index)
				jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting/?method=baidu.ting.song.play&songid=" + this.type[index].song_id, null, (err, res) => {
					if(err) {
						console.log(err)
					} else {
						console.log(res)
						this.$store.commit("changSong", res.bitrate.file_link)
						this.$store.commit("changeid", res.songinfo.pic_big)
						this.$store.commit("changtitle", res.songinfo.title)
						this.$store.commit("changinfo", res.songinfo.info)
					}
				})
			}
		},
		created() {
			var nowTime = new Date().getTime();
            if(sessionStorage.type){
                var tem = JSON.parse(sessionStorage.type);//将存储的信息转化未json对象格式
                if(nowTime - tem.expir<3600000) {//判断存储信息的时间和当前时间的距离是否小于1小时
                    //如果电影信息已经存在了sessionStroage里面就直接获取，否则进行ajax请求获取
                    this.type = tem.data;
                    console.log(this.type)
                    return;//小于1h就直接return，不再执行ajaj请求
                }
            }
			jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=json&type=6&offset=0&size=50", null, (err, res) => {
				if(err) {
					console.log(err);
					if(tem){
                        this.type = tem.data;//如果请求失败就用之前存储的值
                    }
				} else {
					alert(111);
					sessionStorage.type = JSON.stringify({//把json对象格式转化为字符串
                        "data":res.song_list,
                        "expir":new Date().getTime()
                    });
					this.shou = res.song_list.length;
					this.type = res.song_list;
					console.log(res);
				}
			})
		}
	}
</script>

<style scoped lang="scss">
	* {
		list-style: none;
	}
	
	.fl {
		float: left;
	}
	
	.fr {
		float: right;
	}
	
	.songlitB {
		width: 100%;
		height: 100%;
		overflow: hidden;
		.text1 {
			background: url(../images/a0.jpg) no-repeat;
			background-size: 100%;
			width: 100%;
			height: 220px;
			.son {
				margin: 0 auto;
				width: 90%;
				height: 100%;
				color: #fff;
				overflow: hidden;
				.arrow {
					margin-top: 4%;
					width: 20px;
					img {
						width: 100%;
					}
				}
				>h4 {
					margin-top: 10px;
					text-align: center;
					font-size: 20px;
				}
				ul {
					width: 100%;
					margin-top: 20px;
					overflow: hidden;
					.ul-pic {
						width: 35%;
						height: 100%;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.ul-text {
						margin-left: 7%;
						width: 58%;
						text-align: left;
						h4 {
							margin-top: 10%;
							font-size: 20px;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 2;
							display: -webkit-box;
							-webkit-box-orient: vertical;
						}
						.li-pic {
							vertical-align: middle;
							width: 25px;
							height: 30px;
							display: inline-block;
							img {
								width: 100%;
							}
						}
						p {
							margin-top: 2%;
							display: inline-block;
							font-size: 20px;
						}
					}
				}
			}
		}
		.text2 {
			margin: 2% auto;
			width: 93%;
			height: 40px;
			border-bottom: 1px solid silver;
			img {
				width: 100%;
			}
			li {
				display: inline-block;
				line-height: 40px;
			}
			.pic {
				width: 25px;
				height: 25px;
				vertical-align: middle;
				display: inline-block;
			}
			p {
				display: inline-block;
				font-size: 15px;
				line-height: 15px;
				color: #080c0b;
				span {
					color: #939393;
				}
			}
			.choice {
				margin-left: 5%;
			}
		}
		.text3 {
			position: fixed;
			width: 93%;
			height: 48%;
			left: 0;
			right: 0;
			margin: 0 auto;
			overflow: auto;
			.song {
				width: 100%;
				height: 50px;
				border-bottom: 1px solid silver;
				margin-bottom: 2%;
				h3 {
					color: #232615;
				}
				p {
					color: slategrey;
					font-size: 15px;
				}
				&:last-child {
					border: none;
				}
			}
		}
	}
</style>